import React from "react";
import BackModal from "@/component/backModal";
import { dropByCacheKey, getCachingKeys } from "react-router-cache-route";
import { Toast } from "antd-mobile";
import yhTools from "@/tools/yh";
import "./index.scss";
let current = 0;

const creditMap = {
	// 801: {
	// 	steps: ["twoElement", "linkman", "liveness"]
	// },
	// 802: {
	// 	steps: ["authentication", "liveness", "addBank", "linkman"]
	// },
	803: {
		toast: "你可能持有我司其他信贷产品，不可重复申请"
	},
	804: {
		steps: ["twoElement", "linkman", "liveness", "authorization"]
	},
	805: {
		steps: ["authentication", "addBank", "linkman", "liveness"]
	},
	812: {
		//流程6
		steps: ["authentication", "linkman", "liveness"]
	},
	808: {
		//流程7
		steps: ["twoElement", "linkman?linkManCount=1", "liveness"]
	},
	809: {
		//流程9
		steps: [
			"authentication",
			"addBank",
			"linkman",
			"authorization?submitCredit=0",
			"liveness"
		]
	},
	810: {
		//流程8
		steps: ["twoElement", "linkman", "liveness"]
	},
	811: {
		//流程10
		steps: ["liveness"]
	},
	813: {
		steps: ["liveness", "authorization"]
	},
	814: {
		steps: ["liveness", "authorization"]
	}
};
let currentStep = [];
let currentCode = ""; //当前授信标识
/**
803 -首页弹框不允许 
 801-二要素+完善个人信息+人脸  
 802-上传身份证+绑卡+完善信息+人脸
803-首页弹框不允许  
		804-二要素+完善个人信息+弹协议+人脸
 */

function getDocumentHeight() {
	return document.documentElement.clientHeight || document.body.clientHeight;
}
let originalHeight = getDocumentHeight();
let body = document.body || document.documentElement;
let canOut = true;

const creditStore = WrapperComponent => {
	return class extends React.Component {
		constructor(props) {
			super(props);
			this.state = {
				isVisible: false,
				isHiddenBotton: false
			};
			this.isExec = false;
		}
		componentWillUnmount() {
			window.removeEventListener("resize", this.resize);
			if (yhTools.platform() !== "android") {
				document.body.removeEventListener("focusin", this.focusin);
				document.body.removeEventListener("focusout", this.focusout);
			}
		}
		resize = () => {
			if (window.innerHeight !== originalHeight) {
				this.setState({
					isHiddenBotton: true
				});
			} else {
				this.setState({
					isHiddenBotton: false
				});
			}
		};
		componentDidMount() {
			this.props.history.listen(route => {
				let path = route.pathname.split("/").pop();
				const search = route.search;
				current = currentStep.indexOf(path + search) + 1;
			});
			window.addEventListener("resize", this.resize);
			this.calc();
		}
		focusin = e => {
			canOut = false;
			const target = e.target;
			if (target.type == "checkbox") {
				return;
			}
			const thisHeight = target.getBoundingClientRect().bottom;
			setTimeout(() => {
				const c = thisHeight - originalHeight / 2;
				console.log(c, thisHeight, getDocumentHeight(), originalHeight);
				if (c > 0) {
					body.style.transform = `translateY(-${c + 40}px)`;
					canOut = true;
				}
			}, 500);
		};
		focusout = () => {
			if (!canOut) {
				// clearTimeout(timer);
				// timer = null;
				return;
			}
			setTimeout(() => {
				body.style.transform = `translateY(0px)`;
				body.style.transform = null;
			}, 16);
		};
		calc = () => {
			if (yhTools.platform() !== "android") {
				document.body.addEventListener("focusin", this.focusin);
				document.body.addEventListener("focusout", this.focusout);
			}
		};
		//去空格
		trim = (values = {}) => {
			Object.keys(values).forEach(key => {
				if (typeof values[key] === "string") {
					values[key] = values[key].replace(/\s*/g, "");
				}
			});
		};
		dropKey = () => {
			getCachingKeys().forEach(value => {
				dropByCacheKey(value);
			});
		};
		getCreditStep = code => {
			if (this.isExec) return;
			const step = creditMap[code];
			currentCode = code;
			if (step.toast) {
				return Toast.info(step.toast);
			}
			currentStep = step.steps;
			this.isExec = true;
			this.goNext();
		};
		goNext = () => {
			if (current !== -1) {
				let path = currentStep[current];
				if (path) {
					this.props.history.push(`/xhd/credit/${path}`);
				} else {
					this.props.history.push("/xhdOpenSuccess");
				}
			}
		};
		onModalClick = booleanValue => {
			this.setState({
				isVisible: false
			});
			if (!booleanValue) {
				this.dropKey();
				this.props.history.push("/xhdHome");
			}
		};
		showModal = () => {
			this.setState({
				isVisible: true
			});
		};
		handleBack = () => {
			this.showModal();
		};
		render() {
			const { isVisible, isHiddenBotton } = this.state;
			return (
				<>
					<WrapperComponent
						{...this.props}
						goNext={this.goNext}
						getCreditStep={this.getCreditStep}
						handleBack={this.handleBack}
						productNum={802}
						currentCode={currentCode}
						trim={this.trim}
						isHiddenBotton={isHiddenBotton}
					/>
					<BackModal
						product={"802"}
						isVisible={isVisible}
						onClick={this.onModalClick}
					/>
				</>
			);
		}
	};
};

export default creditStore;
